<template>
  <el-dialog
      title="角色权限"
      :visible.sync="formLabelAlign.roleEditFormVisible"
      @close="closeDialog"
  >
    <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="updateRoles"
        :rules="rules"
        ref="updateRoles"
    >
      <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rName">
        <el-input v-model="updateRoles.rName" readonly></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="rDescription">
        <el-input v-model="updateRoles.rDescription"></el-input>
      </el-form-item>
      <el-form-item label="网站角色" :label-width="formLabelWidth">
        <el-checkbox-group
            v-model="updateRoles.checkList"
            @change="changeCheckbox"
        >
          <span
              v-for="item in formLabelAlign.roles"
              :key="item"
              style="margin-right: 60px;"
          >
            <el-checkbox :label="item"></el-checkbox>
          </span>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item class="form-bottom" :label-width="formLabelWidth">
        <el-button
            class="form-btn"
            @click="submitUpdate('updateRoles', updateRoles)"
        >修改角色
        </el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapState, mapMutations, mapActions} from "vuex";

export default {
  name: "RoleEdit",
  data() {
    return {
      labelPosition: "right",
      formLabelWidth: "120px",
      rules: {
        rName: [
          {required: true, message: "请输入角色名称", trigger: "blur"},
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        rDescription: [
          {required: true, message: "备注不能为空", trigger: "blur"},
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("roles", ["formLabelAlign", "updateRoles"]),
  },
  methods: {
    ...mapActions('roles', ['updateRoleInfo']),
    ...mapMutations("roles", ["closeDialog", "changeCheckbox"]),
    //提交表单验证
    submitUpdate(updateRoles, obj) {
      this.$refs[updateRoles].validate((valid) => {
        if (valid) {
          this.updateRoleInfo(obj);
        } else {
          return false;
        }
      });
    }
  },
};
</script>

<style scoped>
.rm {
  margin-left: 30px;
}

.form-btn {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #fff;
}

.form-bottom {
  padding: 20px 0;
  border-top: 1px dashed #beb8b8;
}
</style>